import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import axios from 'axios';

const counterSlice = createSlice({
    name: 'counter',
    initialState: {
        count: 0,
        imgUrl: [],
    },
    reducers: {
        add(state, action) {
            state.count += action.payload;
        },
        minus(state, action) {
            state.count -= action.payload;
        }
    },
    extraReducers: (builder) => {
        builder.addCase(fetchUserById.fulfilled, (state, action) => {
            // console.log("fetchUserById fulfilled", state, action.payload,action.payload.imgurl);
            state.imgUrl = [...state.imgUrl, action.payload];
            console.log("state.imgUrl", state.imgUrl);
            
        })
        builder.addCase(fetchUserById.rejected, (state, action) => {
            // alert(action.error)
            console.log(action.error);
            
        })
    }
});

export const fetchUserById = createAsyncThunk('user/fetchByIdStatus', async (userId, thunkAPI) => {
    const response = await axios.get(`/abc/api/rand.avatar?sort=男&format=json`);    
    return response.data.imgurl;
});


export const { add, minus } = counterSlice.actions;

export default counterSlice.reducer;